import React, { useState, useEffect, useMemo } from 'react';
import { findCinemas } from '@/api/MaiZuo';

import './css/index.css';

export default function App() {
  const [name, setName] = useState('');
  const [list, setList] = useState([]);

  useEffect(() => {
    findCinemas().then((res) => {
      setList(res.cinemas);
    });
  }, []);

  const handleChange = useMemo(() => (e) => setName(e.target.value), []);

  // 计算属性
  const getList = useMemo(() => {
    return list.filter(
      (item) =>
        item.name.toUpperCase().includes(name.toUpperCase()) ||
        item.address.toUpperCase().includes(name.toUpperCase())
    );
  }, [name, list]);

  return (
    <div>
      <div className='search'>
        <input
          value={name}
          onChange={handleChange}
        />
      </div>

      <ul className='cinemaList'>
        {getList.map((item, index) => {
          return (
            <li key={item.cinemaId}>
              <div className='cinemaName'>{item.name}</div>
              <div className='cinemaAddress'>{item.address}</div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
